<template>
	<view class="dplayer-container">
		<div ref="dplayer" id="dplayer"></div>
	</view>
</template>

<script>
	import DPlayer from 'dplayer';

	export default {
		data() {
			return {

			};
		},
		mounted() {
			const dp = new DPlayer({
			    container: document.getElementById('dplayer'),
			    autoplay: false,
			    theme: '#FADFA3',
			    loop: true,
			    lang: 'zh-cn',
			    screenshot: true,
			    hotkey: true,
			    preload: 'auto',
			    logo: 'logo.png',
			    volume: 0.7,
			    mutex: true,
			    video: {
			        url: 'https://vjs.zencdn.net/v/oceans.mp4',
			        pic: 'dplayer.png',
			        thumbnails: 'thumbnails.jpg',
			        type: 'auto',
			    },
			    subtitle: {
			        url: 'dplayer.vtt',
			        type: 'webvtt',
			        fontSize: '25px',
			        bottom: '10%',
			        color: '#b7daff',
			    },
			    danmaku: {
			        id: '9E2E3368B56CDBB4',
			        api: 'https://api.prprpr.me/dplayer/',
			        token: 'tokendemo',
			        maximum: 1000,
			        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
			        user: 'DIYgod',
			        bottom: '15%',
			        unlimited: true,
			        speedRate: 0.5,
			    },
			    contextmenu: [
			        {
			            text: 'custom1',
			            link: 'https://github.com/DIYgod/DPlayer',
			        },
			        {
			            text: 'custom2',
			            click: (player) => {
			                console.log(player);
			            },
			        },
			    ],
			    highlight: [
			        {
			            text: 'marker for 20s',
			            time: 20,
			        },
			        {
			            text: 'marker for 2mins',
			            time: 120,
			        },
			    ],
			});
			
			// const dp = new DPlayer({
			// 	container: this.$refs.dplayer,
			// 	autoplay: true, // 进入页面自动播放无效，是因为浏览器限制需要把音量设置为0
			// 	screenshot: false,
			// 	loop: true,
			// 	theme: "#1296db",
			// 	preload: "auto",
			// 	// volume: 0, 
			// 	video: {
			// 		url: "https://vjs.zencdn.net/v/oceans.mp4",
			// 		type: "mp4",
			// 		// quality: [
			// 		//   {
			// 		//     name: "HD",
			// 		//     url: "demo.m3u8",
			// 		//     type: "hls",
			// 		//   },
			// 		//   {
			// 		//     name: "SD",
			// 		//     url: "demo.mp4",
			// 		//     type: "normal",
			// 		//   },
			// 		// ],
			// 	},
			// });
			// dp.on("ended", function() {
			// 	console.log("player ended");
			// });
		},
		beforeDestroy() {
			// 在组件销毁前销毁 DPlayer 实例
			if (this.dp) {
				this.dp.destroy();
			}
		}
	};
</script>

<style scoped>
	.dplayer-container {
		margin-top: 100px;
		width: 100%;
		height: 500px;
	}
</style>